<template>
    <el-form>
        <el-form-item label="sku名称">
            <el-input
                placeholder="sku名称"
                v-model="skuParams.skuName"
            ></el-input>
        </el-form-item>
        <el-form-item label="价格(元)">
            <el-input
                placeholder="价格(元)"
                type="number"
                v-model="skuParams.price"
            ></el-input>
        </el-form-item>
        <el-form-item label="重量(克)">
            <el-input
                placeholder="重量(克)"
                type="number"
                v-model="skuParams.weight"
            ></el-input>
        </el-form-item>
        <el-form-item label="sku描述">
            <el-input
                placeholder="sku描述"
                type="textarea"
                rows="2"
                v-model="skuParams.skuDesc"
            ></el-input>
        </el-form-item>
        <el-form-item label="平台属性">
            <el-form :inline="true">
                <el-form-item
                    :label="item.attrName"
                    v-for="item in AttrList"
                    :key="item.id"
                >
                    <el-select v-model="item.attrIdAndValueId">
                        <el-option
                            :label="item1.valueName"
                            :value="`${item.id}:${item1.id}`"
                            v-for="item1 in item.attrValueList"
                            :key="item1.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-form-item>
        <el-form-item label="销售属性">
            <el-form :inline="true">
                <el-form-item
                    :label="item.saleAttrName"
                    v-for="item in saleAttr"
                    :key="item.id"
                >
                    <el-select v-model="item.saleIdAndValueId">
                        <el-option
                            :label="item1.saleAttrValueName"
                            :value="`${item.id}:${item1.id}`"
                            v-for="item1 in item.spuSaleAttrValueList"
                            :key="item1.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-form-item>
        <el-form-item label="图片名称">
            <el-table
                border
                class="margin-bottom"
                :data="picList"
                ref="imgTable"
            >
                <el-table-column
                    width="80"
                    type="selection"
                    align="center"
                ></el-table-column>
                <el-table-column label="图片">
                    <template #="{ row, $index }">
                        <el-image :src="row.imgUrl"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="名称" prop="imgName"></el-table-column>
                <el-table-column label="操作">
                    <template #="{ row }">
                        <el-button type="primary" @click="handleDefault(row)">
                            设为默认
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-button type="primary" @click="save">保存</el-button>
            <el-button @click="cancel">取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { reqAttr } from '@/api/attr/index';
import { reqSpuPic, reqSpuSaleAttr, reqAddSku } from '@/api/product/spu';
import type { SkuData } from '@/api/product/spu/type';
import { ElMessage } from 'element-plus';
import { ref, reactive } from 'vue';
// 存储所有的平台属性
const AttrList = ref<any>([]);
// 存储所有的销售属性
const saleAttr = ref<any>([]);
// 存储图片列表
const picList = ref<any>([]);
const skuParams = reactive<SkuData>({
    category3Id: '', //三级分类的ID
    spuId: '', //已有的SPU的ID
    tmId: '', //SPU品牌的ID

    skuName: '', //sku名字
    price: '', //sku价格
    weight: '', //sku重量
    skuDesc: '', //sku的描述

    skuAttrValueList: [
        //平台属性的收集
    ],
    skuSaleAttrValueList: [
        //销售属性
    ],
    skuDefaultImg: '', //sku图片地址
});
const imgTable = ref<any>();
const emit = defineEmits(['changeScenc']);
const cancel = () => {
    emit('changeScenc', 0);
};

const initSkuData = async (
    c1Id: number | string,
    c2Id: number | string,
    data: any,
) => {
    //获取添加 sku 需要的数据
    console.log(c1Id, c2Id, data);
    // 获取平台属性
    const res = await reqAttr(c1Id, c2Id, data.category3Id);
    // 获取销售属性
    const res1 = await reqSpuSaleAttr(data.id);
    // 获取图片列表
    const res2 = await reqSpuPic(data.id);
    AttrList.value = res.data;
    saleAttr.value = res1.data;
    picList.value = res2.data;
    // 收集数据
    skuParams.category3Id = data.category3Id;
    skuParams.spuId = data.id;
    skuParams.tmId = data.tmId;
};

const save = async () => {
    // 整理参数
    skuParams.skuAttrValueList = AttrList.value.reduce(
        (prev: any, item: any) => {
            if (item.attrIdAndValueId) {
                const [attrId, valueId] = item.attrIdAndValueId.split(':');
                prev.push({ attrId, valueId });
            }
            return prev;
        },
        [],
    );
    skuParams.skuSaleAttrValueList = saleAttr.value.reduce(
        (prev: any, item: any) => {
            if (item.saleIdAndValueId) {
                const [saleAttrId, saleAttrValueId] =
                    item.saleIdAndValueId.split(':');
                prev.push({ saleAttrId, saleAttrValueId });
            }
            return prev;
        },
        [],
    );
    // 发送请求
    const res = await reqAddSku(skuParams);
    if (res.code === 200) {
        ElMessage.success('添加成功');
        emit('changeScenc', 0);
    } else {
        ElMessage.error('添加失败');
    }
    emit('changeScenc', 0);
};
const handleDefault = (row: any) => {
    // 复选框选中
    picList.value.forEach((item: any) => {
        imgTable.value.toggleRowSelection(item, false);
    });
    imgTable.value.toggleRowSelection(row, true);
    skuParams.skuDefaultImg = row.imgUrl;
};
// 子组件暴露 的方法
defineExpose({
    initSkuData,
});
</script>

<style scoped>
.el-form-item .el-form-item {
    margin-bottom: 10px;
}
</style>
